<!--
 * @Author: 黄宇/Hyuishine
 * @Date: 2022-05-18 14:30:35
 * @LastEditors: 徐伟杰
 * @LastEditTime: 2022-12-08 10:52:24
 * @Description: 
 * @Email: hyuishine@gmail.com
 * @Company: 3xData
 * @youWant: add you want
-->
<template>
  <view class="container_page">
    <!-- 顶部自定义导航栏 -->
    <action-bar :options="navOptions" />

    <view class="header">
      <view class="search">
        <!-- 搜索框  -->
        <view class="search_bar">
          <input placeholder="请输入被处罚机构名称" v-model="searchObject.agencyInfoName" @blur="btn_search()" />
          <view class="cuIcon-search btn_search" />
        </view>

        <!-- 筛选按钮 -->
        <view class="search_screen">
          <view class="search_screen-option">
            <image :src="baseImgUrl + '/manage/option.png'" mode=""></image>
          </view>
          <span class="search_screen-span" @click="open">筛选</span>
          <view class="search_screen-traingle">
            <image :src="baseImgUrl + '/manage/triangle.png'" mode=""></image>
          </view>
        </view>
      </view>
    </view>

    <view class="main">
      <view class="card" v-for="(item, index) in exposure" :key="index">
        <!-- 被触发单位名称 -->
        <view class="title">{{ item.agencyName }}</view>
        <!-- 所属管辖单位名称 -->
        <view class="subTitle">违法行为名称(案由): {{ item.illegalActName }}</view>
        <view class="subTitle">处罚决定书文号: {{ item.penaltyDecisionNo }}</view>
        <view class="subTitle">处罚决定机关: {{ item.penaltyDecisionOffice }}</view>
        <view class="subTitle">是否关联: <span :class="item.relation == '未关联' ? 'text-red' : ''">{{ item.relation }}</span>
        </view>
        <view class="time">处罚决定日期: {{ item.punishTime }}</view>
      </view>
    </view>

    <uni-popup ref="popup" background-color="#fff">
      <view class="popup-list">
        <uni-section title="筛选" type="circle">
          <form>
            <!-- 时间范围搜索 -->
            <view class="formItem">
              <view class="label">时间范围搜索</view>
              <view class="content">
                <view @click="showPicker = true" class="label_dateRange">{{ dateRange_view || '请选择处罚时间范围' }}</view>
              </view>
            </view>

            <!-- 违法行为名称 -->
            <view class="formItem">
              <view class="label">违法行为名称</view>
              <input class="content" type="text" v-model="searchObject.illegalActName" :placeholder="'请选择违法行为名称'" />
            </view>

            <!-- 处罚依据 -->
            <view class="formItem">
              <view class="label">处罚依据</view>
              <!-- <input class="content" type="text" v-model="searchObject.basisOfPunishment" :placeholder="'请输入处罚依据'" /> -->
              <picker mode="selector" class="content" :range="basisPunishment" range-key="dictLabel"
                @change="changeServerType($event, 'basisOfPunishment')">
                <view :style="{ color: searchObject.basisOfPunishmentName ? '#333' : '#999' }">{{
                  searchObject.basisOfPunishmentName || '请选择处罚依据' }}</view>
              </picker>
            </view>

            <!-- 处罚决定机构 -->
            <view class="formItem">
              <view class="label">处罚决定机构</view>
              <input class="content" type="text" v-model="searchObject.penaltyDecisionOffice"
                :placeholder="'请输入处罚决定机构'" />
            </view>

            <!-- 处罚决定 -->
            <view class="formItem">
              <view class="label">处罚决定</view>
              <!-- <input class="content" type="text" v-model="searchObject.penaltyDecision" :placeholder="'请输入处罚决定'" /> -->
              <picker mode="selector" class="content" :range="penaltyDecisionList" range-key="dictLabel"
                @change="changeServerType($event, 'penaltyDecision')">
                <view :style="{ color: searchObject.penaltyDecisionName ? '#333' : '#999' }">{{
                  searchObject.penaltyDecisionName || '请选择处罚决定' }}</view>
              </picker>
            </view>
          </form>
        </uni-section>
        <view class="popup-list-btn">
          <view class="btn" @click="close"> 重置 </view>
          <view class="btn" @click="sure"> 确定 </view>
        </view>

      </view>
    </uni-popup>
    <mx-date-picker :show="showPicker" type="range" :value="dateRange_value" show-tips begin-text="开始时间" end-text="结束时间"
      @confirm="onSelected" @cancel="showPicker = false" />
  </view>
</template>
<script>
import { baseImgUrl } from "@/config.js";
import MxDatePicker from '@/components/mx-datepicker/index.vue';
let _ = require('lodash')
export default {
  components: { MxDatePicker },
  data() {
    return {
      baseImgUrl,
      // 导航栏参数
      navOptions: {
        center: {
          title: "曝光台"
        },
        left: {
          icon: 'back'
        }
      },
      status: false,
      searchObject: {
        dateRange: null, // 时间范围
        agencyInfoName: null, // 机构名称
        illegalActName: null, // 违法行为名称
        startDate: null, // 开始时间
        endDate: null, // 结束时间
        relation: null, // 是否关联
        basisOfPunishment: null, // 处罚依据id
        basisOfPunishmentName: null, // 处罚依据名称
        penaltyDecision: null, // 处罚决定id
        penaltyDecisionName: null, // 处罚决定名称
        penaltyDecisionOffice: null, // 处罚决定机关
      },
      dateRange_view: '', // 转译 时间范围的显示字段
      dateRange_value: '', // 时间范围选择框实际绑定的值
      showPicker: false,
      exposure: [],

      basisPunishment: [], // 处罚依据列表
      penaltyDecisionList: [], // 处罚决定列表
    }
  },
  onLoad(e) {
    this.getBasisPunishment()
    if (JSON.stringify(e) != "{}") this.$set(this.searchObject, 'name', e.agencyName)
    // 获取曝光台列表数据
    this.getHomeList()
  },
  created() {

  },
  methods: {
    getBasisPunishment() {
      this.$getDict('basis_punishment').then(res => {
        this.basisPunishment = res
      })
      this.$getDict('penalty_decision').then(res => {
        this.penaltyDecisionList = res
      })
    },
    onSelected(e) {
      // 选择
      this.showPicker = false;
      this.dateRange_value = e.value;
      this.$set(this.searchObject, 'startDate', e.value[0])
      this.$set(this.searchObject, 'endDate', e.value[1])
    },

    // 获取曝光台列表数据
    getHomeList() {
      let obj = _.cloneDeep(this.searchObject)
      delete obj.dateRange
      delete obj.basisOfPunishmentName
      delete obj.penaltyDecisionName
      let data = {
        pageNo: 1,
        pageSize: 100,
        serverType: 3,
        ...obj
      }
      this.$store.dispatch('getExposureList', data).then(({ data }) => {
        this.exposure = data.items
      })
    },

    // 搜索
    btn_search() {
      this.getHomeList()
    },

    open() {
      this.$refs.popup.open("top");
    },
    close() {
      for (let key in this.searchObject) {
        this.$set(this.searchObject, key, null)
      }
      this.dateRange_view = null
    },
    sure() {
      this.$refs.popup.close();
      this.getHomeList()
    },


    changeServerType(e, key) {
      let index = e.detail.value
      if (key == 'basisOfPunishment') {
        this.$set(this.searchObject, 'basisOfPunishment', this.basisPunishment[index].dictValue)
        this.$set(this.searchObject, 'basisOfPunishmentName', this.basisPunishment[index].dictLabel)
      } else if (key == 'penaltyDecision') {
        this.$set(this.searchObject, 'penaltyDecision', this.penaltyDecisionList[index].dictValue)
        this.$set(this.searchObject, 'penaltyDecisionName', this.penaltyDecisionList[index].dictLabel)
      }
    }
  },
  watch: {
    //  监测日期，实时转换成 可读性高的显示字段、与后端需要的字段
    dateRange_value(n) {
      if (n) {
        let temp = ''
        n.forEach(time => {
          temp += time.slice(0, 4) + '年'
          temp += time.slice(5, 7) + '月'
          temp += time.slice(8, 10) + '号 到 '
        });

        this.dateRange_view = temp.slice(0, temp.length - 3)

        // todo 
      } else {
        this.dateRange_view = ''
        this.searchObject.dateRange = ''
      }

    }
  }
}
</script>
<style lang="scss" scoped>
@import "./style.scss";
</style>